<template>
  <div class="statisticsView">
    <div class="titleBox">
      <div style="display: flex; align-items: center">
        <div class="titleView">各项指标详情</div>
      </div>
    </div>
    <div class="contentView">
      <!-- menuView -->
      <div class="menuBox">
        <!--  -->
        <div class="menuView">
          <div
            v-for="(item, index) in menuList"
            :key="index"
            class="menuItem"
            :class="currentMenu.label == item.label ? 'menuItem-select' : ''"
            @click="setMenu(item)"
          >
            <div class="smallBox" :style="{ background: item.color }" />
            <div>{{ item.label }}</div>
          </div>
        </div>
        <div class="searchView">
          <div
            v-for="(item, index) in timeList"
            :key="index"
            :class="currentTimeType == item.value ? 'timeItemView-select' : ''"
            class="timeItemView"
            @click="setCurrentTimeType(item)"
          >
            {{ item.label }}
          </div>
          <el-date-picker
            v-model="startTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="开始时间"
            style="flex: 1; margin-right: 10px"
            @change="setStartTime"
          />
          <el-date-picker
            v-model="endTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="结束时间"
            style="flex: 1; margin-right: 10px"
            @change="setEndTime"
          />
        </div>
        <!-- echart -->
      </div>
      <div ref="echartRef" class="echartView" />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../mixins/resize";
import { getZbxq } from "@/api/drug";
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      menuList: [
        { label: "执行率", color: "rgb(187, 217, 149)", value: "1" },
        { label: "管控率", color: "rgb(99, 148, 221)", value: "0" },
        { label: "签到率", color: "rgb(242, 220, 141)", value: "2" },
        { label: "尿检率", color: "rgb(88,40, 187)", value: "3" },
        { label: "谈话率", color: "rgb(133,194,196)", value: "4" },
        { label: "家访率", color: "rgb(254,253,107)", value: "5" },
        { label: "就业安置率", color: "rgb(138,142,245)", value: "6" },
        { label: "帮扶率", color: "rgb(207,143,151)", value: "7" },
        { label: "小程序安装率", color: "rgb(137,137,137)", value: "8" },
      ],
      timeList: [
        { label: "今日", value: "0" },
        { label: "近一周", value: "1" },
        { label: "近一月", value: "2" },
      ],
      startTime: "",
      endTime: "",
      currentTimeType: "0",
      currentMenu: {
        label: "执行率",
        value: "1",
      },
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    this.getRequest();
  },
  methods: {
    setStartTime(value) {
      this.startTime = value;
      this.getRequest();
    },
    setEndTime(value) {
      this.endTime = value;
      this.getRequest();
    },
    getRequest() {
      getZbxq({
        start: this.startTime,
        end: this.endTime,
        interval: this.currentTimeType,
        type: this.currentMenu.value,
      }).then((response) => {
        const x = [];
        const y = [];
        for (let i = 0; i < response.data.length; i++) {
          x.push(response.data[i].name);
          y.push(response.data[i].rate);
        }
        this.initChart(x, y);
      });
    },
    setMenu(item) {
      this.currentMenu = item;
      this.getRequest();
    },
    setCurrentTimeType(item) {
      this.currentTimeType = item.value;
      this.getRequest();
    },
    initChart(x, y) {
      this.chart = echarts.init(this.$refs.echartRef, "echartRef");
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          show: false,
        },
        grid: {
          top: "20px",
          left: 0,
          right: "30px",
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            data: x || [],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 10,
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              show: true, // 不显示坐标轴线
            },
            axisLabel: {
              formatter: "{value} %",
            },
          },
          {
            type: "value",
            axisLine: {
              show: true, // 不显示坐标轴线
            },
            splitLine: {
              show: false, // 不显示网格线
            },
          },
        ],
        series: [
          {
            type: "line",
            tooltip: {
              trigger: "axis",
              // formatter: '{a} <br/>{b}日: {c}元'
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: this.currentMenu.color || "rgba(2, 197, 233, 0.2)",
                lineStyle: {
                  color: this.currentMenu.color || "rgba(23, 107, 203, 0.2)",
                },
              },
            },
            data: y || [],
          },
          {
            type: "bar",
            barWidth: 30,
            tooltip: {
              trigger: "axis",
              // formatter: '{a} <br/>{b}日: {c}元'
            },
            yAxisIndex: 1,
            smooth: true,
            itemStyle: {
              normal: {
                color: this.currentMenu.color || "rgba(2, 197, 233, 0.2)",
              },
            },
            data: y || [],
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.statisticsView {
  width: 100%;
  height: calc(100vh - 370px);
  border-radius: 6px;
  box-shadow: 0 0 6px #ccc;
  display: flex;
  flex-direction: column;
}
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.titleView {
  font-size: 1vw;
  font-weight: bold;
}
.contentView {
  flex: 1;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.menuBox {
  display: flex;
  align-items: center;
}
.searchView {
  display: flex;
  align-items: center;
  width: 450px;
}
.timeItemView {
  margin-right: 10px;
  cursor: pointer;
  font-size: 15px;
}
.timeItemView-select {
  font-size: 20px;
  color: rgb(64, 158, 255);
}
.menuView {
  display: flex;
  flex: 1;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: flex-start;
}
.menuItem {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(233, 234, 238);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.menuItem-select {
  color: rgb(64, 158, 255);
  border: 1px solid rgb(64, 158, 255) !important;
}

.smallBox {
  width: 8px;
  height: 8px;
  margin-right: 4px;
}
.echartView {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  flex: 1;
  box-sizing: border-box;
  padding: 0;
}
</style>
